@import "../../themes/ionic.globals.md";

// Material Design Chip
// --------------------------------------------------

/// @prop - Margin top of the chip
$chip-md-margin-top:                       2px !default;

/// @prop - Margin end of the chip
$chip-md-margin-end:                       0 !default;

/// @prop - Margin bottom of the chip
$chip-md-margin-bottom:                    $chip-md-margin-top !default;

/// @prop - Margin start of the chip
$chip-md-margin-start:                     $chip-md-margin-end !default;

/// @prop - Height of the chip
$chip-md-height:                           32px !default;

/// @prop - Border radius of the chip
$chip-md-border-radius:                    16px !default;

/// @prop - Font family of the chip
$chip-md-font-family:                      $font-family-md-base !default;

/// @prop - Font size of the chip
$chip-md-font-size:                        13px !default;

/// @prop - Text color of the chip
$chip-md-text-color:                       $text-md-color-step-150 !default;

/// @prop - Background color alpha of the chip
$chip-md-background-color-alpha:           .1 !default

/// @prop - Background color of the chip
$chip-md-background-color:                 css-var($text-md-color-value, text-md-color, $chip-md-background-color-alpha) !default;

/// @prop - Margin top of the label in the chip
$chip-md-label-margin-top:                 0 !default;

/// @prop - Margin end of the label in the chip
$chip-md-label-margin-end:                 10px !default;

/// @prop - Margin bottom of the label in the chip
$chip-md-label-margin-bottom:              $chip-md-label-margin-top !default;

/// @prop - Margin start of the label in the chip
$chip-md-label-margin-start:               $chip-md-label-margin-end !default;

/// @prop - Background color of the icon in the chip
$chip-md-icon-background-color:            ion-color($colors-md, primary, base, md) !default;

/// @prop - Fill color of the icon in the chip
$chip-md-icon-fill-color:                  ion-color($colors-md, $chip-md-icon-background-color, contrast, md) !default;

/// @prop - Width of the avatar in the chip
$chip-md-avatar-width:                     32px !default;

/// @prop - Height of the avatar in the chip
$chip-md-avatar-height:                    $chip-md-avatar-width !default;
